<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>004-HTML5拖放</title>

		<style>
			#div1,
			#div2 {
				float: left;
				width: 100px;
				height: 35px;
				margin: 10px;
				padding: 10px;
				border: 1px solid #aaaaaa;
			}
		</style>
	</head>
	<body>
		<!-- 在函数/方法/类级别添加注释 -->

		<!--
      此代码是一个简单的HTML代码片段，用于演示HTML5拖放功能。
      第一个<div>元素包含一个<img>标签，可以被拖动。
      第二个<div>元素用于接收被拖动的元素。
  -->

		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
			<img
				src="https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.png"
				draggable="true"
				ondragstart="drag(event)"
				id="drag1"
				width="88"
				height="31"
			/>
		</div>
		<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

		<script>
			// 当拖动物体进入目标区域时调用，允许放置
			function allowDrop(ev) {
				ev.preventDefault()
			}

			// 当开始拖动物体时调用，设置拖动数据
			function drag(ev) {
				ev.dataTransfer.setData('Text', ev.target.id)
			}

			// 当物体被放置时调用，阻止默认处理并获取拖动数据，然后将拖动的元素添加到目标元素中
			function drop(ev) {
				ev.preventDefault()
				var data = ev.dataTransfer.getData('Text')
				ev.target.appendChild(document.getElementById(data))
			}
		</script>
	</body>
</html>
